<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多级菜单-css</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a{
				display: block;
				width: 100%;
				height: 100%;
				text-decoration: none;
				color: #000000;
			}
			.first{
				width: 600px;
				height: 30px;
				background-color: #E5E5E5;
				margin: 100px auto 0;
			}
			.first>li{
				position: relative;
				text-align: center;
				line-height: 30px;
				float: left;
				width: 100px;
				height: 30px;
				border-right: 1px solid #4A4A4A;
			}
			.second>li{
				position: relative;
			}
			.first>li:hover{
				background-color: #C1C1C1;
			}
			.first>li:hover .second,
			.second>li:hover .three{
				display: block;
				background-color: #C1C1C1;
			}
			.second li:hover{
				background-color: darkturquoise;
			}
			
			.second{
				position: absolute;
				display: none;
				width: 100%;
				background-color: #E5E5E5;
			}
			.three{
				position: absolute;
				display: none;
				width: 100%;
				left: 100px;
				top: 0;
				background-color: #E5E5E5;
			}
			
			.box{
				width: 600px;
				height: 300px;
				background-color: #f0f;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<ul class="first">
			<li>
				<a href="#">一级菜单</a>
				<ul class="second">
					
					<li><a href="#">二级菜单</a></li>
					<li><a href="#">二级菜单</a></li>
					<li>
						<a href="#">二级菜单</a>
						<ul class="three">
							<li><a href="#">三级菜单</a></li>
							<li><a href="#">三级菜单</a></li>
							<li><a href="#">三级菜单</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">一级菜单</a></li>
			<li>
				<a href="#">一级菜单</a>
				<ul class="second">
					<li><a href="#">二级菜单</a></li>
					<li><a href="#">二级菜单</a></li>
				</ul>
			</li>
		</ul>
		<div class="box">内容内容内容内容内容内容内容内容内容内容</div>
	</body>
</html>
